<template>
    <el-dialog class="addDictData" :title="'添加【'+ typeName +'】下的字典'" :visible.sync="dictDataDialogFormVisible" v-if="dictDataDialogFormVisible" width="40%" top="8vh" :before-close="handleDictDataCancel" :close-on-click-modal="false" v-dialogDrag>
      <el-form :model="dictDataForm" :rules="dictDialogFormRules" ref="dictDataForm" label-width="100px">
        <el-form-item label="字典名称" prop="dictLabel">
          <el-input v-model="dictDataForm.dictLabel"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="dictValue">
          <el-input v-model="dictDataForm.dictValue"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enabled">
          <el-switch v-model="dictDataForm.enabled" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="是否固定" prop="fixed">
          <el-switch v-model="dictDataForm.fixed" active-text="是" inactive-text="否" :active-value="1" :inactive-value="0">
          </el-switch>
        </el-form-item>
        <el-form-item label="排序" prop="sortOrder">
          <el-input-number controls-position="right" v-model="dictDataForm.sortOrder" :min="1" :max="999"></el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="dictDataForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleDictDataCancel">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleDictDataSubmit">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { addDictData } from '@/api/tools/dict.js';
export default {
    data() {
        return {
          typeName: '',
          dictDataDialogFormVisible: false,
          dictDataForm: {
            dictLabel: '',
            dictValue: '',
            enabled: 1,
            fixed: 0,
            id: '',
            remark: '',
            sortOrder: 1,
            typeCode: ''
          },
          dictDialogFormRules: {
            dictLabel: [{
              required: true,
              message: '字典名称不能为空',
              trigger: 'blur'
            }],
            dictValue: [{
              required: true,
              message: '字典值不能为空',
              trigger: 'blur'
            }]
          }
        }
    },
    props: {
      propAddData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propAddData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.dictDataDialogFormVisible) {
            const that = this
            that.dictDataDialogFormVisible = newVal.dictDataDialogFormVisible
            that.dictDataForm.typeCode = newVal.typeCode
            that.dictDataForm.sortOrder = newVal.len
            that.typeName = newVal.typeName
          }
        }
      }
    },
    methods: {
      /** 取消 */
      handleDictDataCancel() {
        const that = this
        that.dictDataDialogFormVisible = false
        that.dictDataForm = {
          dictLabel: '',
          dictValue: '',
          enabled: 1,
          fixed: 0,
          id: '',
          remark: '',
          sortOrder: 1,
          typeCode: ''
        }
        that.typeName = ''
        that.$refs.dictDataForm.resetFields()
      },

      /** 确定 */
      handleDictDataSubmit() {
        const that = this
        that.$refs['dictDataForm'].validate(async valid => {
          if(valid) {
            let res = await addDictData(that.dictDataForm)
            if (res.code == 0) {
              that.$message.success('添加字典成功！')
              that.handleDictDataCancel()
              that.$emit("updateDictDataList")
            } else {
              that.$message.error(res.message)
            }
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
.addDictData /deep/ .el-input-number {
  width: 100%;
}
.addDictData /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
/deep/ .el-dialog__header {
  padding: 4px 10px 4px;
}
/deep/ .el-dialog__headerbtn {
  top: 10px;
}
/deep/.el-table--scrollable-x .el-table__body-wrapper {
  z-index: 1;
}
/deep/ .el-dialog__footer {
  padding: 5px 10px 5px;
}        
</style>
